<template>
  <div id="radar" class="radar-echarts"></div>
</template>
<script>
import * as echarts from 'echarts/core'
import { TitleComponent, LegendComponent } from 'echarts/components'
import { RadarChart } from 'echarts/charts'
import { CanvasRenderer } from 'echarts/renderers'

echarts.use([TitleComponent, LegendComponent, RadarChart, CanvasRenderer])
export default {
  name: 'radar',
  data() {
    return {
      myECharts: null
    }
  },
  mounted() {
    this.initECharts()
    window.addEventListener('resize', this.resizeECharts)
  },
  destroyed() {
    window.removeEventListener('resize', this.resizeECharts)
  },
  methods: {
    initECharts() {
      if (this.myECharts) {
        this.myECharts.dispose()
      }
      const echartsDom = document.getElementById('radar')
      this.myECharts = echarts.init(echartsDom)
      const option = {
        color: ['#67F9D8', '#FFE434', '#56A3F1', '#FF917C'],
        tooltip: {
          trigger: 'item'
        },
        grid: {
          left: '50%',
          bottom: '50%',
          containLabel: true
        },
        radar: [
          {
            indicator: [
              { text: 'Indicator1' },
              { text: 'Indicator2' },
              { text: 'Indicator3' },
              { text: 'Indicator4' },
              { text: 'Indicator5' }
            ],
            center: ['50%', '50%'],
            radius: 120,
            startAngle: 90,
            splitNumber: 4,
            shape: 'circle',
            axisName: {
              formatter: '【{value}】',
              color: '#428BD4'
            },
            splitArea: {
              areaStyle: {
                color: ['#77EADF', '#26C3BE', '#64AFE9', '#428BD4'],
                shadowColor: 'rgba(0, 0, 0, 0.2)',
                shadowBlur: 10
              }
            },
            axisLine: {
              lineStyle: {
                color: 'rgba(211, 253, 250, 0.8)'
              }
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(211, 253, 250, 0.6)'
              }
            }
          }
        ],
        series: [
          {
            type: 'radar',
            emphasis: {
              lineStyle: {
                width: 2
              }
            },
            data: [
              {
                value: [100, 8, 0.4, -80, 2000],
                name: 'Data A'
              },
              {
                value: [60, 5, 0.3, -100, 1500],
                name: 'Data B',
                areaStyle: {
                  color: 'rgba(255, 228, 52, 0.4)'
                }
              }
            ]
          }
        ]
      }
      option && this.myECharts.setOption(option)
    },
    resizeECharts() {
      if (this.myECharts) {
        this.myECharts.resize()
      }
    }
  }
}
</script>
<style>
.radar-echarts {
  width: 100%;
  min-height: 368px;
}
</style>
